<template>
  <view class="container">
    <!-- 顶部栏 -->
    <view class="top-bar">
      <view class="location">
        <image src="../../static/icons/address.png" mode="aspectFit"></image>
        <text class="location-text">杭州市梦想小镇</text>
      </view>
      <image src="../../static/icons/ling.png" mode="aspectFit" class="bell-icon"></image>
    </view>
    <!-- 搜索栏 -->
    <view class="search-bar">
      <image src="../../static/icons/search.png" mode="aspectFit"></image>
      <input type="text" placeholder="永辉超市优惠商品" class="search-input">
    </view>
    <!-- 广告图片 -->
    <view class="ad-image">
      <image src="../../static/assets/02.jpg" mode="aspectFit" class="ad-img"></image>
    </view>
    <!-- 功能图标区 -->
    <view class="function-icons">
      <view class="icon-item" v-for="(icon, index) in iconList" :key="index">
        <image :src="icon.src" mode="aspectFit"></image>
        <text>{{ icon.text }}</text>
      </view>
    </view>
    <!-- 附近商铺 -->
    <view class="nearby-shops">
      <view class="shops-header">
        <text>附近店铺</text>
        <navigator url="/pages/shopList/shopList" class="view-more">查看更多</navigator>
      </view>
      <view class="shop-item" v-for="shop in shops" :key="shop.id" @click="goToShopDetail(shop.id)">
        <image :src="shop.imgUrl" mode="aspectFit" class="shop-logo"></image>
        <view class="shop-info">
          <text class="shop-name">{{ shop.name }}</text>
          <text>月售: {{ shop.sales }} 起送: {{ shop.expressLimit }} 基础运费: {{ shop.expressPrice }}</text>
          <text class="slogan" v-if="shop.slogan">{{ shop.slogan }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      iconList: [
        { src: '../../static/assets/super.png', text: '超市便利' },
        { src: '../../static/assets/market.png', text: '菜市场' },
        { src: '../../static/assets/fruits.png', text: '水果店' },
        { src: '../../static/assets/flower.png', text: '鲜花绿植' },
        { src: '../../static/assets/drug.png', text: '医药健康' },
        { src: '../../static/assets/home.png', text: '家居时尚' },
        { src: '../../static/assets/cake.png', text: '烘焙蛋糕' },
        { src: '../../static/assets/sign.png', text: '签到' },
        { src: '../../static/assets/prestige.png', text: '大牌免运' },
        { src: '../../static/assets/red.png', text: '红包套餐' }
      ],
      shoplist: [],
      shops: []
    };
  },
  onLoad() {
    this.fetchShops();
  },
  methods: {
    async fetchShops() {
      try {
        const response = await this.$axios.get('http://localhost:3000/shops');
        this.shops = response.data;
      } catch (error) {
        console.error('获取店铺数据失败', error);
      }
    },
    goToShopDetail(shopId) {
      uni.navigateTo({
        url: `../shopDetail/shopDetail?id=${shopId}`
      });
    }
  }
};
</script>

<style scoped>
page{
     background-color: #f8f8f8;
}
/* 容器样式 */
.container {
  background-color: #f8f9fa;
  padding: 40px; /* 进一步增加内边距 */
  width: 95%; /* 进一步增加宽度比例 */
  margin: 0 auto;
  max-width: 1200px; /* 进一步增加最大宽度 */
  font-size: 18px; /* 进一步增加整体字体大小 */
}

/* 顶部栏样式 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px; /* 进一步增加底部间距 */
}

.location {
  display: flex;
  align-items: center;
}

.location image {
  width: 30px; /* 进一步增加图标大小 */
  height: 30px;
  margin-right: 12px; /* 进一步增加图标与文本间距 */
}

.location-text {
  font-size: 18px; /* 进一步增加文本大小 */
  color: #333;
  font-weight: 500;
}

.bell-icon {
  width: 30px; /* 进一步增加图标大小 */
  height: 30px;
}

/* 搜索栏样式 */
.search-bar {
  background-color: #fff;
  border-radius: 35px; /* 进一步增加圆角半径 */
  display: flex;
  align-items: center;
  padding: 18px 25px; /* 进一步增加内边距 */
  margin-bottom: 25px; /* 进一步增加底部间距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 进一步增加阴影效果 */
}

.search-bar image {
  width: 25px; /* 进一步增加图标大小 */
  height: 25px;
  margin-right: 18px; /* 进一步增加图标与输入框间距 */
}

.search-input {
  flex: 1;
  border: none;
  font-size: 17px; /* 进一步增加输入框字体大小 */
  color: #666;
}

/* 广告图片样式 */
.ad-image {
  border-radius: 20px; /* 进一步增加圆角半径 */
  overflow: hidden;
  margin-bottom: 25px; /* 进一步增加底部间距 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); /* 进一步增加阴影效果 */
}

.ad-img {
  width: 100%;
  height: auto;
  display: block;
}

/* 功能图标区样式 */
.function-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.icon-item {
  width: calc(20% - 20px); /* 进一步调整图标宽度 */ 
  background-color: #fff;
  border-radius: 12px; /* 进一步增加圆角半径 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px; /* 进一步增加底部间距 */
  padding: 15px 0; /* 进一步增加内边距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 进一步增加阴影效果 */
  transition: transform 0.2s ease;
}

.icon-item:hover {
  transform: translateY(-7px); /* 进一步增加悬停时的位移效果 */
}

.icon-item image {
  width: 60px; /* 进一步增加图标大小 */
  height: 60px;
  margin-bottom: 10px; /* 进一步增加图标与文本间距 */
}

.icon-item text {
  font-size: 16px; /* 进一步增加文本大小 */
  color: #333;
}

.nearby-shops {
  width: 100%;
}

.shops-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px; /* 进一步增加底部间距 */
}

.view-more {
  color: #007AFF;
  font-size: 16px; /* 进一步增加文本大小 */
}

.shop-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 12px; /* 进一步增加圆角半径 */
  padding: 18px; /* 进一步增加内边距 */
  margin-bottom: 20px; /* 进一步增加底部间距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* 进一步增加阴影效果 */
}

.shop-logo {
  width: 70px; /* 进一步增加图标大小 */
  height: 70px;
  margin-right: 18px; /* 进一步增加图标与文本间距 */
}

.shop-info {
  flex: 1;
}

.shop-name {
  font-size: 18px; /* 进一步增加文本大小 */
  color: #333;
  margin-bottom: 8px; /* 进一步增加底部间距 */
  display: block;
}

.slogan {
  color: #FF5722;
  font-size: 16px; /* 进一步增加文本大小 */
  margin-top: 8px; /* 进一步增加顶部间距 */
  display: block;
}
</style>